<template>
  <div class="mb-8 lg:mr-12 lg:w-60">
    <div class="text-3xl p-9 text-white bg-primary text-center">{{ currentNavData.label }}</div>
    <el-menu :default-active="meunActive" class="el-menu-vertical" router :default-openeds="['1']" unique-opened>
      <template v-for="item in currentNavData.children">
        <el-sub-menu :index="item.url" :key="item.url" v-if="route.path.startsWith('/product')">
          <template #title>
            <div @click="handleParentSelect(item.category_id)" :class="{ 'submenu-active': route.path.startsWith(item.url) }">{{ item.label }}</div>
          </template>
          <el-menu-item :index="chil.url" v-for="chil in item.children" :key="chil.category_id">
            <div class="pl-4">{{ chil.label }}</div>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item-group v-else>
          <el-menu-item :index="item.url" :key="item.url">
            <div class="text-base p-5">{{ item.label }}</div>
          </el-menu-item>
        </el-menu-item-group>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
const route = useRoute();
const currentNavData = ref({});
const breadcrumbs = useBreadcrumbs();
// 监听路由
const meunActive = ref(route.path);
watchEffect(() => {
  if (breadcrumbs.value.length > 0) {
    currentNavData.value = breadcrumbs.value[0];
    meunActive.value = breadcrumbs.value[breadcrumbs.value.length - 1]?.url;
  }
});

// 处理父级菜单的选中
const handleParentSelect = (index) => {
  console.log("选中的父级菜单:", index);
};
</script>
<style scoped lang="scss">
.el-menu-vertical {
  ::v-deep(.el-sub-menu__title, .el-sub-menu__title:hover) {
    // background-color: var(--el-color-primary);
    // color: white !important;
    background-color: #f7f8fa;
    border-color: #e6e6e6;
    border: 1px solid #e6e6e6;
  }
  .el-menu-item-group {
    background-color: #f7f8fa;
    border-color: #e6e6e6;
  }
  ::v-deep(.el-menu-item-group__title) {
    padding: 0;
  }
  ::v-deep(.el-menu-item) {
    border: 1px solid #e6e6e6;
  }
  ::v-deep(.el-sub-menu__title),
  ::v-deep(.el-menu-item) {
    height: auto;
    font-size: 16px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
.submenu-active {
  color: var(--el-menu-active-color);
}
@media (min-width: 1024px) {
  ::v-deep(.el-sub-menu__icon-arrow) {
    font-size: 14px;
  }
}
</style>
